<script lang="ts" setup>
import { ref } from 'vue'

// 子路由下标
const childNavIndex = ref<number>(0)

</script>


<template>
  <div class="videoWraps">
    <div class="childNav">
      <router-link to="/Video" class="video" @click="() => childNavIndex = 0" :class="childNavIndex === 0 ? 'active' : ''">视频</router-link>
      <router-link to="/ChildMV" class="mv" @click="() => childNavIndex = 1" :class="childNavIndex === 1 ? 'active' : ''">MV</router-link>
    </div>
    <RouterView />
  </div>
</template>


<style lang="scss" scoped>
.videoWraps {
  @extend .pageWrapSize;
  padding-left: 30px;

  .childNav {
    width: 100%;
    line-height: 50px;

    a {
      font-family: $textFont;
      margin-right: 30px;
    }

    .active {
      position: relative;
      font-size: $font-size-lg;
      font-family: $activeTextFont;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 100%;
        height: 3px;
        @include background_color('bk_color');
      }
    }
  }
}


</style>
